<template>
  <div class="container">
       <div class="box-header">
           <div class="imgbox">
              <div class="headbox">
                  <img :src="perInfor.headimgurl" alt="">
              </div>
           </div>
           <p class="name">{{perInfor.nickname}}</p>
       </div>
       
           
           <!-- <div class="order-list">
               <div class="orderbox">
                   <router-link :to='{path:"/order",query:{userId:$route.query.userId,type:"2",updateType:"3",orderType:"1"}}'>
                       <div class="order-icon order-icon1"></div>
                       <p class="ordertex">待升级</p>
                   </router-link>
                 
               </div>
               <div class="orderbox">
                   <router-link :to='{path:"/order",query:{userId:$route.query.userId,type:"2",updateType:"2",orderType:"1"}}'>
                      <div class="order-icon order-icon2"></div>
                      <p class="ordertex">升级中</p>
                   </router-link>
               </div>
               <div class="orderbox">
                   <router-link :to='{path:"/order",query:{userId:$route.query.userId,type:"3",acceptStatus:"3",orderType:"1"}}'>
                     <div class="order-icon order-icon3"></div>
                     <p class="ordertex">待提货</p>
                   </router-link>
               </div>
               <div class="orderbox">
                   <router-link :to='{path:"/order",query:{userId:$route.query.userId,type:"3",acceptStatus:"0",orderType:"1"}}'>
                      <div class="order-icon order-icon4"></div>
                      <p class="ordertex">待收货</p>
                   </router-link>
               </div>
               <div class="orderbox">
                   <router-link :to='{path:"/order",query:{userId:$route.query.userId,type:"3",acceptStatus:"5",orderType:"1"}}'>
                      <div class="order-icon order-icon5"></div>
                      <p class="ordertex">退换货</p>
                   </router-link>
               </div>
           </div> -->
   
       <div class="all-orders">
              <div class="tab-boxs">
                <router-link :to='{path:"/MyWallet",query:{userId:$route.query.userId}}'>
                    <div class="box-img">
                       <img src="../assets/qianbao.png" alt="" class="box-i">
                    </div>
                    <div class="tab-text">佣金钱包</div>
                </router-link>
              </div>
              <div class="tab-boxs">
                <router-link :to='{path:"/Coupon",query:{userId:$route.query.userId}}'>
                    <div class="box-img">
                       <img src="../assets/youhuijuan.png" alt="" class="box-ii">
                    </div>
                    <div class="tab-text">优惠卷</div>
                </router-link>
              </div>
           </div>
        
       <div class="tablist">
         <div class="order-box">
            <div class="all-order">
                <router-link :to='{path:"/Order",query:{userId:$route.query.userId}}'>
                我的订单
                </router-link>
            </div>
           </div>
          <div class="tab-box tab-box2">
              <router-link :to='{path:"/Adress",query:{userId:$route.query.userId}}'>
                  我的地址
              </router-link>
          </div>
          <div class="tab-box tab-box3">
              <router-link :to='{path:"/AboutPlay"}'>
                  玩法说明
              </router-link>
          </div>
          <div class="tab-box tab-box4">
              <router-link :to='{path:"/Agent",query:{userId:$route.query.userId}}'>
                  申请成为代理
              </router-link>
          </div>
          <div class="tab-box tab-box6" @click="show">
                  联系我们
              <popup v-model="show11" position="bottom">
                    <div class="position-vertical-demo">
                      联系电话：18502710534
                    </div>
             </popup>
              
          </div>
          <div class="tab-box">
              <x-icon type="ios-information" size="40"></x-icon>
              <router-link :to='{path:"/Suggestion",query:{userId:$route.query.userId}}'>
                  投诉建议
              </router-link>
          </div>
       </div>
       <div class="tablist">
           <div class="tab-box tab-box5">
              <router-link :to='{path:"/AboutShop",query:{userId:$route.query.userId}}'>
                  关于我们
              </router-link>
          </div>
       </div>
       <foot-nav/>
  </div>
</template>
<script>
import footNav from "@/components/common/footer.vue"
import { Popup} from 'vux'
export default {   
    components:{
         Popup,
          footNav,
    },
    data () {
	    return {
            perInfor:'',
            show11:false,
        }
    },
    created() {
        this.forbidShare()
    },
    mounted(){
       this.getUserInfor()
    },
    methods:{
        show(){
           this.show11=true
        },
        
        getUserInfor(){
            var self=this
            this.$axios.post('/device/userEntity/getInfo',{}).then((res) => {
                self.perInfor=res.data.data
                console.log(res)
            })
        },
        forbidShare() {
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        },
        onBridgeReady() {
            WeixinJSBridge.call('hideOptionMenu');
        }
     }
}
</script>


<style lang="less" scoped>
.tab-boxs:first-child{
    border-right: 2px solid #eaeaea;
}
.tab-boxs{
    flex:1;
    height: 80px;
    display: flex;
    a{
        display: flex;
        justify-content: center;
        align-items: center;
        flex:1;
     }
    .box-i{
            width: 45px;
    height: 45px;
     margin-right: 10px;
    }
    .box-ii{
        width:50px;
        height:50px;
        margin-right: 10px;
    }
}
.all-orders{
    display: flex;
    margin-bottom:20px;
    background: #fff;
    padding:30px 0;
}
.position-vertical-demo {
  background-color: #ffce09;
  color: #000;
  text-align: center;
  padding: 15px;
}
.vux-x-icon {
  fill: #F70968;
  position: absolute;
  left:0;
  height:80px;
}
.tablist{
    padding-left:27px;
    background: #fff;
    margin-bottom: 20px;
    text-align: left;
}
a{
    display: block;
    width:100%;
    color: #666666;
}
.tab-box{
    border-bottom: 1px solid #f6f6f6;
    padding-left:60px;
    position: relative;
    padding-right:27px;
    height: 80px;
    line-height: 80px;
}
.tab-box1::before{
    background: url(../assets/wodeqianbao.png) no-repeat center center;
}
.tab-box2::before{
    background: url(../assets/wodedizhi.png) no-repeat center center;
}
.tab-box3::before{
    background: url(../assets/wanfashuoming.png) no-repeat center center;
}
.tab-box4::before{
    background: url(../assets/shenqing.png) no-repeat center center;
}
.tab-box6::before{
    background: url(../assets/lianxiwomen.png) no-repeat center center;
}
.tab-box5::before{
    background: url(../assets/guanyuwomen.png) no-repeat center center;
}

.tab-box:after{
    content: "";
    position:absolute;
    height: 100%;
    width: 34px;
    top:0;
    right:27px;
    background: url(../assets/gengduo.png) no-repeat center center;
    background-size:21px 33px ;
}
.tab-box::before{
    content: "";
    position:absolute;
    height: 100%;
    width: 34px;
    top:0;
    left:0;
    background-size:contain;
}
.order-icon1{
    background: url(../assets/daishengji.png) no-repeat center center;
}
.order-icon2{
    background: url(../assets/shengjizhong.png) no-repeat center center;
}
.order-icon3{
    background: url(../assets/daitihuo.png) no-repeat center center;
}
.order-icon4{
    background: url(../assets/daifahuo.png) no-repeat center center;
}
.order-icon5{
    background: url(../assets/daishouhuou.png) no-repeat center center;
}
.container{
   min-height: 100%;
   width: 100%;
   padding-bottom:100px;
   background: #f6f6f6;
   font-size: 28px;
   color: #666666;
}
.ordertex{
    line-height: 60px;
    text-align: left;
}
  .order-list{
      text-align: left;
      margin-bottom: 20px;
      display: flex;
      .orderbox{
          flex:1;
          display: flex;
          flex-flow: column;
          align-items: center;
          a{
          display: flex;
          flex-flow: column;
          align-items: center;
          }
          .order-icon{
              width:58px;
              height: 58px;
              background-size: contain;
          }
      }
  }
   .order-box{
       padding-right:27px;
           border-bottom: 1px solid #f6f6f6;
       background: #fff;
       margin-bottom: 20px;
       .all-order{
           line-height: 100px;
           font-size: 32px;
           color: #666666;
           padding-left:60px;
           position: relative;
           display: flex;
           text-align: left;
       }
       .all-order:before{
           content: "";
           position:absolute;
           height: 100%;
           width: 34px;
           top:0;
           left:0;
           background: url(../assets/dingdana.png) no-repeat center center;
           background-size: 44px 42px;
       }
       .all-order:after{
           content: "";
           position:absolute;
           height: 100%;
           width: 34px;
           top:0;
           right:0;
           background: url(../assets/gengduo.png) no-repeat center center;
           background-size:21px 33px ;
       }
   }
    .box-header{
        height:240px;
        background: #ff1c4b;
        background-size: 100% 100%;
        width:100%;
            box-sizing: border-box;
        align-items: center;
        display: flex;
            padding: 0 28px;
        .name{
            font-size: 32px;
            line-height: 100px;
            text-align: center;
             color: #fff;
        }
        .imgbox{
            display: flex;
            justify-content: center;
            overflow: hidden;

            .headbox{
                height: 120px;
                border-radius: 100%;
                width: 120px;
                overflow: hidden;
                margin-right: 20px;
            }
            img{
          
                min-height: 100%;
                width: 140px;
            }
        }
    }
</style>
